<%--
  Created by IntelliJ IDEA.
  User: 孤焰
  Date: 2021/6/15
  Time: 17:33
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">

                    <form class="layui-form">
                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <a>筛选：</a>
                            </div>
                            <%-- 搜索框--%>
                            <div class="layui-inline">
                                <input type="text" name="orderNo" placeholder="搜索订单号" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" lay-submit="" lay-filter="search">搜索</button>
                            </div>

                            <%-- 日期选择--%>
                            <div class="layui-inline">
                                <label class="layui-form-label">日期范围</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" id="payment-range" placeholder=" - ">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="order-list" lay-filter="order-list"></table>

                    <script type="text/html" id="status-change">
                        {{# if(d.status == 0) {}}
                                <a class="layui-btn layui-btn-xs" lay-event="generate">生成订单</a>
                        {{# } else if (d.status == 1) {}}
                                <a class="layui-btn layui-btn-xs" lay-event="pay">确认付款</a>
                        {{# } else if (d.status == 2) {}}
                                <a class="layui-btn layui-btn-xs" lay-event="ship">确认发货</a>
                        {{# } else if (d.status == 3) {}}
                                <a class="layui-btn layui-btn-xs" lay-event="receipt">确认收货</a>
                        {{# } else if (d.status == 4) {}}
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="close">关闭交易</a>
                        {{# } else if (d.status == 5) {}}
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除订单</a>
                        {{# }}}
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/layuiadmin/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/static/js/axios.min.js"></script>
<script>
    layui.config({
        base: '${pageContext.request.contextPath}/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'layer', 'laydate', 'laytpl'], function(){
        var admin = layui.admin
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var laytpl = layui.laytpl;

        var tableWhere = {};
        tableWhere.userId = '${user.id}';
        table.render({
            id: 'orderList',
            elem: '#order-list',
            url: '${pageContext.request.contextPath}/order/orderList',
            where: tableWhere,
            cols: [[
                {type: 'checkbox'},
                {title: '订单号', field: 'orderNo', width: 280},
                {
                    title: '收货地址',
                    templet: function (data) {
                        return data.shipping.receiverAddress;
                    }
                },
                {title: '实际付款金额', field: 'payment', width: 160},
                {
                    title: '支付类型',
                    templet: function (data) {
                        if (data.paymentType == 1) {
                            return '在线支付';
                        } else {
                            return '线下支付';
                        }
                    },
                    width: 130
                },
                {title: '运费', field: 'postage', width: 160},
                {
                    title: '订单状态',
                    templet: function (data) {
                        switch (data.status) {
                            case 0:
                                return '已取消';
                            case 1:
                                return '未付款';
                            case 2:
                                return '已付款';
                            case 3:
                                return '已发货';
                            case 4:
                                return '交易成功';
                            case 5:
                                return '交易关闭';
                        }
                    },
                    width: 130
                },
                {title: '下单时间', field: 'createTime'},
                {title: '订单关闭时间', field: 'closeTime'},
                {title: '操作', fixed: 'right', align:'center', width: 105, toolbar: '#status-change'}
            ]],
            page: true,
            toolbar: 'default'
        });

        // 渲染时间框组件
        laydate.render({
            elem: '#payment-range',
            range: true,
            done: function(value, date, endDate){
                var beginDate;
                var lastDate;
                if (date.year && date.month && date.date) {
                    beginDate = date.year+'-'+date.month+'-'+date.date;
                    tableWhere.startDate = new Date(beginDate);
                }
                if (endDate.year && endDate.month && endDate.date) {
                    lastDate = endDate.year+'-'+endDate.month+'-'+endDate.date;
                    tableWhere.endDate = new Date(lastDate);
                }

                if (!beginDate) {
                    delete tableWhere.startDate;
                }
                if (!lastDate) {
                    delete tableWhere.endDate;
                }

                table.reload('orderList');
            }
        });

        //监听搜索表单
        form.on('submit(search)', function (data) {
            tableWhere.orderNo = data.field.orderNo;
            table.reload('orderList');
            return false;
        });

        function updateStatusById(idParam, statusParam) {
            var param = {
                id: idParam,
                status: statusParam
            };
            axios.post('${pageContext.request.contextPath}/order/updateOrderById', param).then(function (res) {
                if (res.data.code != 200) {
                    layer.msg('数据库遇到未知错误，更新失败', {icon: 5});
                } else {
                    setTimeout(function () {
                        table.reload('orderList');
                    }, 400);
                    layer.msg('订单更新成功', {icon: 6});
                }
            });
        };

        // 监听行内工具栏
        table.on('tool(order-list)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if (layEvent == 'generate') {
                layer.confirm('确认生成订单吗', function(index){
                    updateStatusById(data.id, 1);
                    layer.close(index);
                });
            } else if (layEvent == 'pay') {
                layer.confirm('确认付款吗', function(index){
                    updateStatusById(data.id, 2);
                    layer.close(index);
                });
            } else if (layEvent == 'ship') {
                layer.confirm('确认发货吗', function(index){
                    updateStatusById(data.id, 3);
                    layer.close(index);
                });
            } else if (layEvent == 'receipt') {
                layer.confirm('确认收货吗', function(index){
                    updateStatusById(data.id, 4);
                    layer.close(index);
                });
            } else if (layEvent == 'close') {
                layer.confirm('确认关闭交易吗', function(index){
                    updateStatusById(data.id, 5);
                    layer.close(index);
                });
            } else if (layEvent == 'delete') {
                layer.confirm('确认删除订单吗', function(index){
                    updateStatusById(data.id, 0);
                    layer.close(index);
                });
            }
        });

        //单元格表头工具栏监听
        table.on('toolbar(order-list)', function(obj) {
            switch (obj.event) {
                case 'add':
                    top.layui.index.openTabsPage('${pageContext.request.contextPath}/order/orderAdd', "订单增加");
                    break;
                case 'delete':
                    var checkBoxData = table.checkStatus('orderList').data;
                    if (checkBoxData.length == 0) {
                        layer.msg('未选中数据项', {icon: 5});
                        return;
                    }

                    layer.confirm('你确认取消订单吗?', {title:'提示'}, function(index){
                        var idArr = [];
                        for (var i = 0; i < checkBoxData.length; i++) {
                            idArr.push(checkBoxData[i].id);
                        }

                        axios.post('${pageContext.request.contextPath}/order/batchDelOrder', idArr).then(function (res) {
                            if (res.data.code != 200) {
                                layer.msg('数据库遇到未知错误，删除失败', {icon: 5});
                            } else {
                                layer.msg('数据删除成功', {icon: 6});
                                table.reload('orderList');
                            }
                        });

                        layer.close(index);
                    });
                    break;
                case 'update':
                    var checkBoxData = table.checkStatus('orderList').data;
                    if (checkBoxData.length == 0) {
                        layer.msg('未选中数据项', {icon: 5});
                        return;
                    }
                    if (checkBoxData.length > 1) {
                        layer.msg('数据项不可以多选', {icon: 5});
                        return;
                    }

                    layer.open({
                        type: 2,
                        title: '订单编辑',
                        shadeClose: false,
                        shade: 0,
                        area: ['60%', '90%'],
                        content: '${pageContext.request.contextPath}/order/orderUpdate?id='+checkBoxData[0].id //iframe的url
                    });
                    break;
            }
        });
    });
</script>
</body>
</html>